<template>
	<view class="all">
		<!-- <view style="width: 750upx;height: 200upx;background: #000;"></view> -->
		<!-- <ShareView v-if="is_show" @changIsSHow='changIsSHow'></ShareView> -->
		<swiper class="top" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in data_list.image" :key="index">
				<image @click="previewImage_tap(item,index)" class="top" mode="aspectFill" :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<view style="display: flex;justify-content: space-between;position: relative;">
				<view class="syht">
					<view class="content_title">{{data_list.name}}</view>
					<view class="content_titles">
						<view class="content_money" v-if="data_list.coupon_price">
							<text style="color:#333;font-size: 20rpx; line-height: 1; vertical-align: bottom;
							font-family: 'Source Han Sans CN', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;">
								<text style="text-decoration: line-through;">原价¥ </text>
								<text style="font-size: 36rpx;text-decoration: line-through;font-family: OPPOSans;line-height: 1;margin: 0 2rpx;">{{data_list.range_price}}</text>
							</text>
							<text style="display: inline-block; padding: 0rpx 16rpx;
							border-radius: 30rpx;margin-left: 8rpx;font-size: 20rpx;vertical-align: bottom;
							 background-color: #f00004; color: #fff;box-sizing: border-box;">券后￥
							 <text style="font-size: 44rpx;line-height: 1;margin: 0 2rpx;" class="oppo">{{data_list.coupon_price}}</text>{{data_list.unit ?  data_list.unit : '起'}}</text>
						</view>
						<view class="content_money" v-else style="font-family: OPPOSans;">¥{{data_list.range_price}}</view>
						<!-- <view class="content_money" v-if="data_list.type == 1">  积分 {{data_list.price}}</view> -->
						<!-- <view class="content_moneys"> 运费：{{delivery_money}}元 </view> -->
					</view>
				</view>
				<uni-fav bgColor="#bfbfbf" bgColorChecked="#1C336B" :checked="checked" @click="onClick"/>
				<!-- <view class="content_title_text">运费：{{delivery_money}}元</view> -->
				<!-- <view class="" style="position: absolute;bottom: 25rpx;right: 25rpx; font-size: 26rpx;color: #ff7575;" @click="coupon_tap_dk">
					领券 <span style="margin-left: 5rpx;">></span>
				</view> -->
			</view>
			<view style="padding-top: 15rpx;margin-top: 15rpx;position: relative;border-top: 1rpx solid #f5f5f5;" @click="coupon_tap_dk" v-if="data_list.coupon_list && data_list.coupon_list.length > 0">
				<view style="display: flex;gap: 20rpx;flex-wrap: wrap;" >
					<view class="" style="border: 0.4rpx solid #e9313166; color: #E93131; padding: 4rpx 6rpx;font-size: 28rpx;border-radius: 8rpx;" v-for="coupon in data_list.coupon_list" :key="coupon.coupon_id">
						满减{{coupon.condition}}-{{coupon.money}}
					</view>
				</view>
				<image src="../../static/shangmen/23.png" style="position: absolute;top: 50%; right: 20rpx; transform: translateY(-50%); width: 34upx;height: 34upx;margin-top: 5rpx;"></image>
			</view>
		</view>
		
		<!-- <view class="attr_list">
			<view class="attr_list_title">
				规格
			</view>
			<view class="attr_list_all">
				<view class="attr_list_all_item" :class="{'active': activeAttr.id == item.id}" v-for="item in data_list.attr_list" :key="item.id" @click="activeAttr = item">
					{{item.attr_name}}
				</view>
			</view>
		</view> -->
		<!-- <view class="specification" @click="specification_tap_dk">
			<view class="specification_title">选择规格</view>
			<view class="specification_box">
				<view class="specification_box_text">请选择选择规格</view>
				<view class="specification_box_texts">{{specification}}</view>
			</view>
		</view> -->
		<view class="details" style="padding-bottom: 100upx;">
			<view class="details_title" style="padding-bottom: 20upx;">商品详情</view>
			<rich-text :nodes="content"></rich-text>
		</view>
		<view style="width: 100%;background: #fff;position: fixed;bottom: 0upx;padding-bottom: 20upx;" v-if="data_list.type != 1" >
			<view style="text-align: center;line-height: 88upx;background: #1C346D;color: #fff; width: 690upx;height: 88upx;margin-top: 12upx;margin-left: 30upx;border-radius: 70upx;font-size: 32upx;" @click="order_tap"> 立即购买 </view>
		</view>
		<view class="all_bottom" v-if="data_list.type == 1">
			<!-- <view class="all_bottom_s" @click="type_tap">
				<uni-icons :color="type == 'star'?'#222':'#ff0000'" :type="type" size="20" style="margin-top: 12upx;"></uni-icons>
				<view class="all_bottom_s_text">{{type == 'star'?'收藏':'已收藏'}} </view>
			</view> -->
			<view class="all_bottom_box">
				<view class="all_bottom_box_bs" style="margin-right: 20upx;" @click="cart_tap">加入购物车</view>
			</view>
			<view class="all_bottom_box">
				<view class="all_bottom_box_b" style="margin-right: 20upx;" @click="order_tap_before">立即购买</view>
			</view>
		</view>
		<!-- <view class="specification_s" v-if="specification_key" @click.stop="specification_tap_yc">
			<view class="specification_s_box" @click.stop="specification_tap_dk">
				<view class="specification_s_box_list">
					<view style="display: flex;padding: 20upx 0;">
						<image :src="images" @click="previewOpen(images)" style="width: 100upx;height: 100upx;" mode="aspectFill"></image>
						<view style="margin-left: 20upx;">
							<view style="font-size: 30upx;color: #ff0000;">¥ {{data_list.price}}</view>
							<view style="font-size: 24upx;color: #666;margin-top: 15upx;">库存：{{inventory}}</view>
						</view>
					</view>
					<view class="specification_s_box_list_title">{{data_list.type}}</view>
					<view class="specification_s_box_lists">
						<view :class="item.is_show == 0?'specification_s_box_lists_text':'specification_s_box_lists_texts'" v-for="(item,index) in specification_list" :key="index" @click.stop="specification_tap(index)">
							<view style="display: flex;">
								<image :src="item.image" style="width: 40upx;height: 40upx;"></image>
								<view style="margin-left: 10upx;">{{item.name}} <text style="color: #666;font-size: 18upx;position: absolute;margin-top: -25upx;" v-if="item.OOS == 0">缺货</text> </view>
							</view>
						</view>
					</view>
				</view>
				<view class="specification_s_box_anniu">
					<view class="specification_s_box_anniu_text" @click.stop="specification_tap_yc">取消</view>
					<view class="specification_s_box_anniu_texts" @click.stop="specification_tap_ycs">确定</view>
				</view>
			</view>
		</view> -->
		<!-- <previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="images" :descs="descs" @longPress="longPress"></previewImage> -->
		<view class="coupons" v-if="coupon_key" @click.stop="coupon_tap_yc">
			<view class="coupons_box"  @click.stop="coupon_tap_dk" style="padding-top: 0;box-shadow: 0px -8rpx 20rpx 4rpx rgba(0, 0, 0, 0.07);padding-bottom: 300rpx;">
				<view class="" style="text-align: center;border-bottom: 1rpx solid #efefef;position: relative;height: 100rpx; display: flex;justify-content: center;align-items: center;font-size: 40rpx;font-weight: 500;">
					优惠券详情
					<img src="../../static/shangmen/28.png" style="width: 60rpx;height: 60rpx;position: absolute;top: 50%; right: 0rpx;transform: translateY(-50%);" alt=""  @click.stop="coupon_tap_yc">
				</view>
				<view class="coupons_item" v-for="coupon in data_list.coupon_list" :key="coupon.coupon_id">
					<view class="coupons_item_left">
						<view class="" style="font-size: 76rpx; font-weight: 500;color: #fc2626;font-family: OPPOSans;">
							<span style="font-size: 28rpx;font-family: Source Han Sans;">￥</span>{{Number(coupon.money)}}
						</view>
					</view>
					<view class="coupons_item_center">
						<view class="" style="color: #6D6A6A;" v-if="coupon.condition">
							满{{Number(coupon.condition)}}元可用
						</view>
						<view class="" style="color: #6D6A6A;" v-else>
							无使用门槛
						</view>
						<view class=""  style="color: #D8D8D8;font-size: 24rpx;">
							{{coupon.start_time}}~{{coupon.end_time}}
						</view>
					</view>
					<view class="coupons_item_right" @click="receiveCoupon(coupon)">
						领取
					</view>
				</view>
				<!-- <view class="coupons_btn" @click.stop="coupon_tap_yc" >
					我知道了
				</view> -->
			</view>
		</view>
		<view class="tan" v-if="specification_key" @click.stop="specification_tap_yc">
			<view class="tan_box"  @click.stop="specification_tap_dk">
				<view class="box_top syht">
					<image :src="data_list.image[0]" mode="aspectFill" style="width: 170upx;height: 170upx;border-radius: 10upx;margin-left: 25upx;"></image>
					<!-- <view style="margin-left: 20upx;margin-top: 20upx;">
						<view v-if="data_list.type != 3" style="font-size: 32upx;color: #333;">¥{{data_list.price}}</view>
						<view v-if="data_list.type == 3" style="font-size: 32upx;color: #333;">积分{{data_list.price}}</view>
					</view> -->
					<view style="margin-left: 20rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<view>
							<!-- <view v-if="key == 3" style="font-size: 32upx;color: #333;">积分{{data_list.price}}</view> -->
							<view class="content_money" v-if="activeAttr && activeAttr != '' && activeAttr.coupon_price">
								 <!-- class="line_through" -->
								 <text style="box-sizing: border-box;color:#333;line-height: 1; vertical-align: bottom;
								 font-size: 20rpx; font-family: 'Source Han Sans CN', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;">
									 <text style="text-decoration: line-through;">¥</text>
									 <text style="font-size: 36rpx;text-decoration: line-through;font-family: OPPOSans;line-height: 1;margin: 0 2rpx;">
									 {{activeAttr.totalPrice}}</text>
								</text>
								 <text style="display: inline-block; padding: 0rpx 16rpx;
								 border-radius: 40rpx;margin-left: 8rpx;font-size: 20rpx;box-sizing: border-box;
								  background-color: #f00004; color: #fff;box-sizing: border-box;vertical-align: bottom;">
								  券后￥<text style="font-size: 44rpx;line-height: 1;margin: 0 2rpx;" class="oppo">{{activeAttr.coupon_price}}</text>
								  {{vModelValue==1 ? (data_list.unit ?  data_list.unit : '/起') :''}}
								  </text>
								  
								<!-- <text style="color:#000;font-size: 20rpx;">¥ <text style="font-size: 39rpx;" class="oppo">{{activeAttr.totalPrice}}</text></text>
								<text style="display: inline-block; padding: 0rpx 16rpx 10rpx;
								height: 40rpx;border-radius: 20rpx;margin-left: 8rpx;font-size: 20rpx;
								 background-color: #f00004; color: #fff;">券后￥<text style="font-size: 38rpx;" class="oppo">{{activeAttr.coupon_price}}</text></text> -->
							</view>
							<view class="content_money" v-else>
								<text style="color:#E93131;font-size: 20rpx;">¥ <text style="font-size: 44rpx;font-family: OPPOSans;" class="oppo">
								{{activeAttr && activeAttr != '' ? activeAttr.totalPrice : data_list.range_price}} </text></text>
							</view>
						</view>
						<view class="" style="font-size: 32rpx;">
							<view class=""  v-if="activeAttr && activeAttr != ''">
								已选：{{activeAttr.attr_name}}
							</view>
							<view class="" style="color: #ea1f22;"  v-else>
								请选择规格
							</view>
						</view>
						<view>
							<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue"  :min="1" style="font-size: 20rpx;"/>
						</view>
					</view>
				</view>
				
				<view class="attr_list">
					<view class="attr_list_title">
						规格
					</view>
					<view class="attr_list_all">
						<view class="attr_list_all_item" :class="{'active': activeAttr.id == item.id}" v-for="item in attr_list" :key="item.id" @click="activeAttr = item">
							{{item.attr_name}}
						</view>
					</view>
				</view>
				<view style="width: 700upx;text-align: center;height: 100upx;font-size: 44rpx;color: #fff;border-radius: 20upx;margin-top: 20upx;line-height: 100upx;background: #1C336B;font-weight: 700;" @click="goods_cart_api">{{specification_type =='cart' ? '加购物车' : '立即购买'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import ShareView from '../../../components/Share_view/Share_view.vue';
	import previewImage from '../../components/kxj-previewImage/kxj-previewImage.vue'
	export default {
		components: {
			// ShareView,
			previewImage
		},
		data() {
			return {
				checked:false,
				vModelValue:1,
				delivery_money:'',
				is_show:false,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				type:'star',
				type_key:0,
				specification:'',
				specification_key:false,
				specification_type:'',
				specification_list:[],
				goods_id:'',
				data_list:{},
				content:'',
				urls:'',
				url:'',
				key:'',
				specificationa:'',
				title:'',
				imageUrl:'',
				summary:'',
				href:'',
				images:'',
				descs:[],
				imgs:[],
				inventory:'',
				money:0,
				number:1,
				checkList:false,
				activeAttr:'',
				coupon_key:false,
			}
		},
		onLoad(num) {
			if( num.key == 1 ) {
				this.url = this.$Api.goods_detail_api
				this.urls = this.$Api.goods_collect_api
			}else{
				this.url = this.$Api.mall_detail_api
				this.urls = this.$Api.goods_collect_api
			}
			this.key = num.key
			this.goods_id = num.goods_id
			this.goods_detail_api()
			// this.share_api()
		},
		computed:{
			attr_list(){
				if(this.data_list.attr_list){
					return this.data_list.attr_list.map(attr=>{
						attr.totalPrice = attr.attr_price
						const coupon_list = this.data_list.coupon_list || []
						const coupon_list_filter = coupon_list.filter(c=>{
							return c.condition <= attr.attr_price * this.vModelValue
						})
						// 存在可用优惠券
						if(coupon_list_filter.length > 0){
							let coupon_price = 0
							coupon_list_filter.forEach(c=>{
								coupon_price = Math.max(coupon_price, c.money)
							})
							attr.coupon_price = Math.max(0, attr.attr_price*this.vModelValue - coupon_price)
							attr.newcoupon_price = coupon_price
						}
						// attr.attr_price
						// coupon.condition
						// coupon.money
						return attr
					})
				}else {
					return []
				}
			}
		},
		methods: {
			previewImage_tap(url,index) {
				var that = this
				// 预览图片
				var url = [url]
				// console.log('url',url)
				uni.previewImage({
					current:index,
					urls: url,
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			onClick(num) {
				if( this.checked == false ) {
					this.checked = true
				}else{
					this.checked = false
				}
				this.goods_collection_api()
			},
			change(value) {
				this.numberValue = value
			},
			changeValue(value) {
				console.log(this.activeAttr)
				// this.activeAttr.totalPrice = this.activeAttr.attr_price * value;
				console.log( this.activeAttr.attr_price * value)
				console.log(this.activeAttr.newcoupon_price)
				this.activeAttr.coupon_price = this.activeAttr.attr_price * value - this.activeAttr.newcoupon_price;
				console.log(this.activeAttr.coupon_price)
				console.log(this)
				console.log('返回数值：', value);
			},
			
			blur(e) {
				console.log('blur:', e);
			},
			focus(e) {
				console.log('focus:', e);
			},
			favClick(index) {
				this.checkList[index] = !this.checkList[index]
				console.log(this.checkList[index]);
				this.$forceUpdate()
			},
			//打开预览e
			previewOpen(src) {
				var _this = this;
				var param = src[0];
				uni.previewImage({
					current: param,
					urls: _this.imgs
				});
			},
			//长按事件
			longPress(data) {
				console.log(data);
				uni.showModal({
					showCancel: false,
					title: '长按事件',
					content: '已触发长按事件,你可以在这里做更多',
					success: showResult => {
						
					}
				});
			},
			setClipboardData() {
				uni.setClipboardData({
					data: 'https://app.tiantianmotuo.com/h5/#/',
					success: function () {
						console.log('success');
					}
				});
			},
			//分享内容
			share_api() {
				var that = this
				that.$request(that.$Api.share_api, {
					access_token: uni.getStorageSync('access_token'),
				}, "POST").then(res => {
					if (res.data.code == 0) {
						if( res.data.data.share_title == null ) {
							uni.showToast({
								title: '服务器错误，未拿到分享内容',
								duration: 2000,
								icon: 'none'
							});
							return;
						}
						that.title = res.data.data.share_title
						that.imageUrl = res.data.data.share_image
						that.summary = res.data.data.share_sub_title
						that.href = res.data.data.share_link
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			changIsSHow(e) {
				this.is_show = e
			},
			is_show_tap() {
				this.is_show = true
			},
			//分享好友
			friend() {
				var that = this
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: that.href,
					title: that.title,
					summary: that.summary,
					imageUrl: that.imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//分享朋友圈 
			Circle() {
				var that = this
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: that.href,
					title: that.title,
					summary: that.summary,
					imageUrl: that.imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//收藏 取消收藏
			goods_collection_api() {
				var that = this
				that.$request(that.urls, {
					access_token:uni.getStorageSync('access_token'),
					goods_id:that.goods_id,
				},"POST").then(res => {
					if( res.data.code == 0 ){
						that.goods_detail_api()
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			//详情
			goods_detail_api() {
				var that = this
				that.$request(that.$Api.detail_index_api, {
					access_token:uni.getStorageSync('access_token'),
					goods_id:that.goods_id,
				},"POST").then(res => {
					if( res.data.code == 0 ){
						that.data_list = res.data.data.list
						if(that.data_list.coupon_list){
							that.data_list.coupon_list.forEach(c=>{
								c.money = Number(c.money)
								c.condition = Number(c.condition)
							})
						}
						
						// that.activeAttr = that.data_list.attr_list.length > 0 ? that.data_list.attr_list[0] : ''
						if( res.data.data.list.collection == 0 ) {
							that.checked = false
						}else{
							that.checked = true
						}
						console.log('that.checked',that.checked)
						var richtext=  res.data.data.list.content
						const regex = new RegExp('<img', 'gi');
						richtext= richtext.replace(regex, `<img style="max-width: 100%;"`);
						that.content = richtext;
						that.delivery_money = res.data.data.delivery_money
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			order_tap_before(){
				this.specification_key = true
				this.specification_type='order'
			},
			order_tap() {
				if(!this.activeAttr || this.activeAttr==''){
					uni.showToast({
						title: '请选择规格',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				let data_list = {
					name:this.data_list.name,
					image:this.data_list.image,
					price:this.activeAttr.attr_price,
					integral:this.data_list.integral,
					type:this.data_list.type,
					goods_id:this.data_list.goods_id,
					attr_id:this.activeAttr.id,
					num:this.vModelValue
				}
				this.specification_key = false
				if( this.data_list.type == 1 ) { //普通商品
					uni.navigateTo({
						url:'../order_zf/order_zf?data_list='+JSON.stringify(data_list)
					})
				}
				if( this.data_list.type == 2 ) { //汽车养护商品
					uni.navigateTo({
						// url:'../order_zf/order_zf?data_list='+JSON.stringify(data_list)
						url:'../order_zf_a/order_zf_a?data_list='+JSON.stringify(data_list)
					})
				}
				if( this.data_list.type == 3 ) { //奢品养护商品
					uni.navigateTo({
						url:'../order_zf_b/order_zf_b?data_list='+JSON.stringify(data_list)
					})
				}
			},
			cart_tap() {
				this.specification_type='cart'
				this.specification_key = true
			},
			goods_cart_api() {
				if(!this.activeAttr || this.activeAttr==''){
					uni.showToast({
						title: '请选择规格',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if(this.specification_type == 'cart'){
					var that = this
					that.$request(that.$Api.goods_cart_api, {
						access_token:uni.getStorageSync('access_token'),
						goods_id:that.goods_id,
						money:that.data_list.price,
						//money:Number(that.vModelValue) * Number(that.data_list.price),
						number:that.vModelValue,
						attr_id:that.activeAttr.id
					},"POST").then(res => {
						if( res.data.code == 0 ){
							that.specification = ''
							that.specification_key = false
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					})
				}else {
					this.order_tap()
				}
			},
			specification_tap_yc() {
				this.specification = ''
				this.specification_key = false
			},
			specification_tap_ycs() {
				this.specification_key = false
				this.specification = this.specificationa
			},
			specification_tap_dk() {
				this.specification_key = true
			},
			specification_tap(index) {
				var that = this
				var datas = this.specification_list
				var da = []
				for( let i=0;i<datas.length;i++ ) {
					if( index == i ) {
						if( datas[i].is_show == 0 ) {
							if(datas[i].OOS != 0 ) {
								this.images = datas[i].image
								let image = [datas[i].image]
								this.imgs = image
								this.inventory = datas[i].inventory
								datas[i].is_show = 1
								this.specificationa = datas[i].name
							}else{
								uni.showToast({
									title: '暂时缺货',
									duration: 2000,
									icon: 'none'
								});
							}
						}else{
							datas[i].is_show = 0
							this.specification = ''
						}
					}else{
						datas[i].is_show = 0
					}
					da.push(datas[i])
				}
				that.$forceUpdate()
				that.specification_list = da
			},
			type_tap() {
				if( this.data_list.collection == 0 ) {
					this.type = 'star-filled'
				}else{
					this.type = 'star'
				}
				this.goods_collection_api()
			},
			coupon_tap_yc(){
				this.coupon_key = false
			},
			coupon_tap_dk() {
				this.coupon_key = true
			},
			receiveCoupon(coupon){
				var that = this
				that.$request(that.$Api.goods_receive_coupon_api, {
					access_token:uni.getStorageSync('access_token'),
					coupon_id:coupon.coupon_id
				},"GET").then(res => {
					if( res.data.code == 0 ){
						that.coupon_key = false
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		.all{
			.tan{
				.tan_box{
					.box_top{
						display: flex;
					}
					width: 750upx;
					background: #fff;
					position: fixed;
					bottom: 0upx;
					padding: 25upx;
					min-height: 400upx;
				}
				width: 750upx;
				position: fixed;
				bottom: 0;
				height: 100vh;
				background: rgba(0,0,0,.5);
			}
			.specification_s{
				.specification_s_box{
					.specification_s_box_anniu{
						.specification_s_box_anniu_texts{
							width: 260upx;
							text-align: center;
							padding: 20upx 30upx;
							font-size: 28upx;
							color: #EEEEEE;
							border-radius: 10upx;
							background: #222;
						}
						.specification_s_box_anniu_text{
							width: 260upx;
							text-align: center;
							padding: 20upx 30upx;
							font-size: 28upx;
							color: #222;
							border-radius: 10upx;
							background: #EEEEEE;
						}
						display: flex;
						padding: 25upx 0;
						border-top: 1upx solid #EEEEEE;
						justify-content: space-between;
					}
					.specification_s_box_list{
						.specification_s_box_lists{
							.specification_s_box_lists_text{
								font-size: 28upx;
								color: #222;
								background: #EEEEEE;
								margin-top: 20upx;
								padding: 10upx 20upx;
								border-radius: 10upx;
								margin-left: 20upx;
							}
							.specification_s_box_lists_texts{
								font-size: 28upx;
								color: #FFFFFF;
								background: #008000;
								margin-top: 20upx;
								padding: 10upx 20upx;
								border-radius: 10upx;
								margin-left: 20upx;
							}
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							margin-left: -20upx;
						}
						.specification_s_box_list_title{
							font-size: 28upx;
							color: #222;
						}
						padding: 25upx 0;
					}
					width: 710upx;
					padding: 20upx;
					background: #FFFFFF;
					position: fixed;
					bottom: 0;
					z-index: 2;
				}
				width: 750upx;
				height: 100vh;
				background: rgba(0,0,0,.5);
				position: fixed;
				z-index: 1;
				top: 0;
			}
			.all_bottom{
				.all_bottom_box{
					.all_bottom_box_b{
						width: 300upx;
						height: 70upx;
						border-radius: 50upx;
						border: 2upx solid #cf4052;
						line-height: 70upx;
						text-align: center;
						font-size: 32upx;
						background: #1C336B;
						color: #FFFFFF;
						margin-top: 12upx;
						margin-left: 10upx;
					}
					.all_bottom_box_bs{
						width: 300upx;
						height: 70upx;
						border-radius: 50upx;
						border: 2upx solid #1C336B;
						line-height: 70upx;
						text-align: center;
						font-size: 32upx;
						background: #fff;
						color: #1C336B;
						margin-top: 12upx;
						margin-left: 10upx;
					}
					.all_bottom_box_a{
						width: 206upx;
						height: 64upx;
						border-radius: 4upx;
						border: 2upx solid #EA4E29;
						line-height: 64upx;
						text-align: center;
						font-size: 32upx;
						color: #EA4E29;
						margin-top: 12upx;
					}
					display: flex;
					// width: 700upx;
					// margin-left: 20upx;
					justify-content: space-around;
				}
				.all_bottom_s{
					.all_bottom_s_text{
						font-size: 24upx;
						color: #333333;
						line-height: 70upx;
						margin-left: 10upx;
					}
					margin-top: 10upx;
					margin-left: 25upx;
					display: flex;
				}
				width: 700upx;
				padding: 0 25upx 20upx 25upx;
				// padding-bottom: 20upx;
				background: #FFFFFF;
				box-shadow: 0upx -2upx 10upx 0upx rgba(0, 0, 0, 0.08);
				position: fixed;
				bottom: 0;
				display: flex;
				justify-content: space-between;
			}
			.details{
				.details_title{
					font-size: 28upx;
					color: #333333;
					line-height: 34upx;
				}
				padding: 25upx 25upx 100upx 25upx;
				background: #FFFFFF;
				margin-top: 22upx;
			}
			
			.specification{
				.specification_box{
					.specification_box_texts{
						font-size: 28upx;
						color: #333333;
					}
					.specification_box_text{
						font-size: 28upx;
						color: #333333;
					}
					display: flex;
					justify-content: space-between;
					margin-top: 18upx;
				}
				.specification_title{
					font-size: 28upx;
					color: #333333;
					line-height: 34upx;
				}
				padding: 25upx;
				margin-top: 22upx;
				background: #FFFFFF;
			}
			.content{
				.content_title_text{
					margin-top: 10upx;
					color: #999999;
				}
				.content_titles{
					.content_moneys{
						font-size: 24rpx;
						color: #999999;
					}
					.content_money{
						font-size: 44rpx;
						color: #cf4052;
					}
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
				}
				.content_title{
					font-size: 36rpx;
					color: #333333;
				}
				padding: 25upx;
				background: #FFFFFF;
			}
			.top{
				width: 750upx;
				height: 750upx;
			}
			width: 750upx;
		}
		background: #f4f4f4;
	}
	.attr_list {
		// margin-top: 20rpx;
		padding: 25rpx;
		&_title {
			font-size: 44rpx;
			color: #333333;
		}
		&_all {
			margin-top: 20rpx;
			display: flex;
			gap: 27rpx;
			flex-wrap: wrap;
			&_item {
				font-size: 40rpx;
				color: #444;
				padding: 9rpx 21rpx;
				background-color: #F6F6F6;
				border-radius: 3rpx;
				border: 1rpx solid #fff;
				border-color: transparent;
			}
			&_item.active {
				background-color: #fff;
				border-color: #E82020;
				color: #E82020;
			}
		}
	}

	.coupons{
		width: 750upx;
		position: fixed;
		bottom: 0;
		height: 100vh;
		background: rgba(0,0,0,.5);
		box-sizing: border-box;
		.coupons_box{
			width: 750upx;
			background: #fff;
			position: fixed;
			bottom: 0upx;
			padding: 25upx;
			min-height: 400upx;
			box-sizing: border-box;
			.box_top{
				display: flex;
			}
		}
	}
	.coupons_item {
		border-radius: 8rpx;
		background-color: #fff2f2;
		padding: 10rpx;
		display: flex;
		position: relative;
		padding-right: 100rpx;
		font-size: 28rpx;
		width: 700rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		// box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .1);
		border-radius: 5px;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 2rpx solid rgba(0, 0, 0, 0.06);
		&_left {
			width: 210rpx;
			box-sizing: border-box;
			text-align: center;
			padding-right: 40rpx;
		}
		&_center {
			box-sizing: border-box;
			font-size: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		&_right {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
			padding: 0rpx 20rpx;
			color: #fff;
			width: 104rpx;
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 8rpx;
			opacity: 1;
			background: #EB0400;
			font-family: Source Han Sans;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	.coupons_btn {
		margin-top: 40rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 35rpx;
		color: #fff;
		background-color: #ff4242;
	}
	/deep/ .uni-numbox__value {
		font-size: 20rpx !important;
		width: 54rpx !important;
		height: 36rpx !important;
	}
	/deep/ .numbox__minus {
		height: 36rpx !important;
	}
	.line_through {
		position: relative;
	}
	.line_through::before {
		content: '';
		width: 100%;
		height: 1rpx;
		position: absolute;
		top: 50%;
		left: 0;
		background-color: #000;
	}
</style>
